<!-- 前台首页 -->
<link rel="stylesheet" href="/css/apps/index/index.css"/>

<div class="swiper-container">
	<div class="swiper-wrapper">
		<#if slideList??>
			<#list slideList as slide>
				<div class="swiper-slide waterImg">
					<a href="#">
					<#if  slide.picurl?index_of(".gif")!=-1>
						<img alt="幻灯片" src="/${slide.picurl!''}" />
					<#else>
						<img alt="水印"  class='watermark' src="/${slide.picurl!''}" />
					</#if>
					</a>
				</div>
			</#list>
		</#if>
	</div>
	<!-- 如果需要分页器 -->
	<div class="swiper-pagination"></div>
</div>



<div class="main layui-clear">
	<div class="wrap layui-clear">
		<div class="layui-left">
			<div class="latest-news">
				<span class="text"><span class="zh">最新资讯</span><br /><span class="en">INFORMATION</span></span>
			</div>
			<div class="phone-latest-news">
				<span>最新资讯</span>
			</div>
			<ul class="news-list" id="new-list">
				<#if informationdisplayList??>
					<#list informationdisplayList.content as list>
						<li class="layui-clear list-li">
							<a class="box" href="/admin/informationdisplay/hotDetail/${list.id!''}.html?id=${list.id!''}">
								<div class="new-card-list  waterImgPage">
									<#if list.fileurl?index_of(".gif")==-1>
										<img class="watermark" alt="" src="/${list.fileurl!''}">
									<#else>
										<img class="" alt="" src="/${list.fileurl!''}">
									</#if>
								</div>
								<div class="info">
									<div class="title">
										<span class="layui-elip title-name">${list.title!''}</span>
									</div>
									<div class="descBox" title="${list.briefintroduction!''}">
										<#if (list.briefintroduction?length>76) >
								          	${list.briefintroduction[0..76]?default("")}
								          	<#if (list.briefintroduction?length>77) >
								          		...
								          	</#if>
								        <#else>
								          	${list.briefintroduction!''}
								        </#if>
									</div>
									<div class="userInfoBox">
										<div class="time"><span>发布于&nbsp;${list.releasetime!''}</span></div>
										<div class="share-btn">
											<span class="share-tip"></span>
											<div class="share-box share-small">
												<span class="border-tip"><em></em></span>
												<span class="share-info">分享资讯</span>
												<ul>
													<li>
														<object>
															<a  href="#" class="weibo" id="weibo${list.id!''}"  title="分享到微博" onclick="getXLWBRHerf('/admin/informationdisplay/hotDetail','${list.id!''}','${list.title!''} - 盒子实验室 BOX LAB')">
																<span class="text">新浪微博</span>
															</a>
														</object>
													</li>
													<li>
														<object>
															<a  href="#" class="weixin" id="weixin" title="分享到微信" onmouseover="getWinXixImg('${list.id!''}','/admin/informationdisplay/hotDetail')">
																<div class="weixin-box">
																	<div class="index-weixin-img">
																		<span class="weixin-title">微信分享 扫一扫</span>
																		<div id="weixin${list.id!''}" class="weixin-img-box">
																		
																		</div>
																	</div>
																	<span class="weixin-border-tip"><em></em></span>
																</div>
																<span class="text">微信</span>
															</a>
															
														</object>
													</li>
													<li>
														<object>
															<a  href="#" class="qzone" id="qzone${list.id!''}"  title="分享到QQ空间" onclick="getQQRHerf('/admin/informationdisplay/hotDetail','${list.id!''}','${list.title!''} - 盒子实验室 BOX LAB','针对国内青少年STEAM创客教育建设的，提供教学案例，案例代码，国内外一手资源和创新实验信息等的开源交流社区。')">
																<span class="text">qq空间</span>
															</a>
														</object>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
							</a>
						</li>
					</#list>
				</#if>
			</ul>

			<div style="text-align: center" class="front-desk">
				<div class="laypage-main" id="pages"></div>
			</div>
		</div>
		<div class="layui-right">
			<div class="recommend-section">
				<span class="text"><span class="zh">推荐板块</span><br /><span class="en">RECOMMEND</span></span>
			</div>

			<ul class="plate-list">
				<#if blockList??>
					<#list blockList as block>
						<li>
							<a class="layui-clear" href="#" onclick="searchHref('','${block.id!''}','${RequestParameters['q']!''}','topicIndex')">
								<div class="card-list">
									<span class="class"><img alt="" src="/res/blockmanagement/${block.fileurl!''}.html"></span>
									<span class="class-title layui-elip">${block.blockname!''}</span>
								</div>
							</a>
						</li>
					</#list>
				</#if>
			</ul>

			<div class="recommend-section">
				<span class="text"><span class="zh">最近热帖</span><br /><span class="en">RANKING</span></span>
			</div>
			<!-- 移动端推荐板块 -->
			<div class="recommend-plate">
				<div class="title">推荐板块</div>
				<div class="plate-list-box  layui-clear">
					<#assign blockNum=0 >
					<ul class="plate-ul  layui-clear" 
					<#list blockList as block>
						<#if block.type=="板块">
							<#assign blockNum="${blockNum?number + 1}">
						</#if>
					</#list>
					style="width:${blockNum?number*5}rem">
						<#if blockList??>
							<#list blockList as block>
								<li class="plate-li">
									<a class="layui-clear plate-a" href="#" onclick="searchHref('','${block.id!''}','${RequestParameters['q']!''}','topicIndex')">
										<div class="plate-content layui-elip">
											<span class="class"><img class="layui-circle" alt="" src="/res/blockmanagement/${block.fileurl!''}.html"></span>
											<span class="class-title layui-elip">${block.blockname!''}</span>
										</div>
									</a>
								</li>
							</#list>
						</#if>
					</ul>
				</div>
			</div>
			<div class="phone-latest-news">
				<span>最近热帖</span>
			</div>
			<#if hotList?? && (hotList?size>0)>
				<div class="post-list layui-clear">
					<ul>
						<#list hotList as relaViewsTopic>
							<#if relaViewsTopic_index<2>
								<li>
									<span></span>
									<a class="" href="/topic/detail/${relaViewsTopic.id!''}.html">
										${relaViewsTopic.title!''}
									</a>
								</li>
							</#if>
						</#list>
						<#list hotList as relaViewsTopic>
							<#if 2<=relaViewsTopic_index>
								<li class="phone-topic-li">
									<span></span>
									<a class="" href="/topic/detail/${relaViewsTopic.id!''}.html">
										${relaViewsTopic.title!''}
									</a>
								</li>
							</#if>
						</#list>
					</ul>
				</div>
			</#if>
			<#if hotList?? && (hotList?size>0)>
				<#list hotList as relaViewsTopic>
					<#if 2==relaViewsTopic_index>
						<div class="phone-more-topic">
							<span onclick="showPhoneMoreTopic();">展开更多热帖<i class="layui-icon downward">&#xe61a;</i><i class="layui-icon upward">&#xe619;</i> </span>
						</div>
					</#if>
				</#list>
			</#if>
			
			<div class="right-edge about-us">
		        <div class="plate-list layui-clear" style="text-align: center;">
		        	<img alt="" src="/res/configurationFile/${configuration.imageurl!''}.html">
		        	<div class="about-content">
			        	<span class="about-title">关注我们</span><br>
			        	<span class="about-dec">了解更多最新资讯  领取众多福利</span>
		        	</div>
		        	
		        </div>
		    </div>
		</div>
	</div>
</div>
<script>
var num = 0;//全局变量
layui.use(['laypage', 'layer'], function(){
	var laypage = layui.laypage;
  	laypage({
	    cont: 'pages'
	    ,first:'首页'
	    ,last:'末页'
	    ,pages: ${informationdisplayList.totalPages}
	    ,curr:${informationdisplayList.number+1}
	    ,skin: '#32c24d'
	    ,jump:function(obj, first){
	    	var curr = obj.curr;
	    	if(!first){
	    		location.href = '/?p='+curr+"<#if RequestParameters['q']?? && RequestParameters['q'] != ''>&q=${RequestParameters['q']}</#if>";
	    	}
	    }
	});
});



var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal',
    loop: true,
    autoplay:true,
    // 如果需要分页器
    pagination: {
        el: '.swiper-pagination',
        clickable :true,
    },
    
})
/* 
function integratingData(data) {
	console.log(data);
	var url = "/admin/informationdisplay/hotDetail";
	var summary = "针对国内青少年STEAM创客教育建设的，提供教学案例，案例代码，国内外一手资源和创新实验信息等的开源交流社区。";
	
	for(var i = 0; i < data.length; i++) {
		var title = data[i].title + ' - 盒子实验室 BOX LAB' ;
		var $li = <li class="layui-clear list-li">
					<a class="box" href="/admin/informationdisplay/hotDetail/'+ data[i].id+'.html?id='+ data[i].id+'">
						<div class="new-card-list  waterImgPage">
							<img class="'+ (data[i].fileurl.indexOf(".gif") == -1 ? "watermark" : "")+'" alt="" src="/'+data[i].fileurl+'">
						</div>
						<div class="info">
							<div class="title">
								<span class="layui-elip title-name">data[i].title+</span>
								
							</div>
							<div class="descBox">data[i].briefintroduction+</div>
							<div class="userInfoBox">
								<div class="time"><span>发布于&nbsp;'+getNowDate(data[i].releasetime)+</span></div>
								<div class="share-btn">
									<span class="share-tip"></span>
									<div class="share-box share-small">
										<span class="border-tip"><em></em></span>
										<span class="share-info">分享资讯</span>
										<ul>
											<li>
												<object>
													<a  href="#" class="weibo" id="weibo'+data[i].id+'"  title="分享到微博" onclick="getXLWBRHerf(\''+ url +'\',\''+data[i].id+'\',\''+ title +'\')">
														<span class="text">新浪微博</span>
													</a>
												</object>
											</li>
											<li>
												<object>
													<a  href="#" class="weixin" id="weixin" title="分享到微信" onmouseover="getWinXixImg(\''+data[i].id+'\',\''+ url +'\')">
														<div class="weixin-box">
															<div class="index-weixin-img">
																<span class="weixin-title">微信分享 扫一扫</span>
																<div id="weixin'+data[i].id+'" class="weixin-img-box">
																
																</div>
															</div>
															<span class="weixin-border-tip"><em></em></span>
														</div>
														<span class="text">微信</span>
													</a>
													
												</object>
											</li>
											<li>
												<object>
													<a  href="#" class="qzone" id="qzone'+data[i].id+'"  title="分享到QQ空间" onclick="getQQRHerf(\''+ url +'\',\''+data[i].id+'\',\''+ title +'\',\''+ summary +'\')">
														<span class="text">qq空间</span>
													</a>
												</object>
											</li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</a>
				</li>;
				$('#new-list').append($li);
	}
} */
//异步分页
//menulists('/information', '');//第一次请求数据
/* function menulists(url, curr) {
	var page = curr || 1; //向服务端传的参数
	$.ajax({
		type: "POST",
		url: url ,
		dataType: "json",
		data: {},
		async: true,
		success: function(data) {
			$('#new-list').empty();
			
			integratingData(data.content);//拼接数据
			
			layui.use(['laypage', 'layer'], function() {
			    var laypage = layui.laypage;
			    laypage({
			        cont: 'pages',
			        first: '首页',
			        last: '末页',
			        pages: data.totalPages, //通过后台拿到的总页数
			        curr: curr || 1, //当前页,
			        skin: '#6665fe',
			        skip: true,
			        jump: function(obj, first) {
			        	if(!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
			        		$('#new-list').empty();
							menulists('/information?p=' + obj.curr, obj.curr);
						}
			        }
			    });
			});
		}
	});
}; */

function showPhoneMoreTopic(){
	num++;
	$(".phone-topic-li").toggle();
	if(num % 2 != 0){
		$(".phone-more-topic .downward").css("display","none");
		$(".phone-more-topic .upward").css("display","inline-block");
	}else{
		$(".phone-more-topic .downward").css("display","inline-block");
		$(".phone-more-topic .upward").css("display","none");
	}

}

</script>